<template>
    <el-card class="box-card">
        <el-table :data="studentData" style="width: 100%">
            <el-table-column label="学生编号" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-icon><timer /></el-icon>
                        <span style="margin-left: 10px">{{ scope.row.sid }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="学生姓名" width="180">
                <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>姓名: {{ scope.row.sname }}</div>
                            <div>住址: {{ scope.row.addr }}</div>
                        </template>
                        <template #reference>
                            <el-tag>{{ scope.row.sname }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="Operations">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                    >Edit</el-button
                    >
                    <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                    >Delete</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import {ref} from 'vue'
//引入查询所有学生的方法
import {findAll} from "../../api/student";
const findStudents=()=>{
    findAll().then(resp=>{
        console.log("resp:",resp)
    })
}
findAll()
// vue3定义变量/数组语法
    let studentData=ref([
        {
            sid:1001,
            sname:"张三",
            addr:"上海"
        }
    ])

</script>


<style scoped>
    .box-card {
        width: 100%;
    }
</style>
